<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
<script src="https://oss.chathot.me/action/js/vue.min.js?v=5341"></script>
<script src="https://oss.chathot.me/action/mobile_js/mobile_until.js?v=5341"></script>
<script src="https://oss.chathot.me/action/mobile_js/Blob.min.js?v=5341"></script>
<script src="https://oss.chathot.me/action/js/loading.js?v=5341"></script>
<script src="https://oss.chathot.me/action/mobile_js/mobile_https.js?v=0.10067"></script>
<script src="https://oss.chathot.me/action/mobile_js/svga.min.js?v=5341"></script>
<link rel="stylesheet" href="https://oss.chathot.me/action/js/var.css?v=5341">
<script src="https://oss.chathot.me/action/mobile_js/request_2.js?v=5341"></script>
<script src="./miss.js?v=52341"></script>
<script src="./miss1.js?v=52341"></script>
<!-- <script src="./miss2.js?v=2425"></script> -->
<link rel="stylesheet" href="./miss.css?v=52341">
</head>
<body>
<div class="app" id="app">
<div class="head-svga">
<div class="left" @click='openTc'>
<img src="https://oss.chathot.me/action/halloweenDirectory/miss/reward.png"
alt="">
            </div>
        </div>
        <div class="git" style="height: 3.1rem;">
            <div class="gifl">
                <div class="gifl-t">
                    <div>¿Soy la Miss Latina de tu mente?</div>
                    <div>Envía estos regalos para convertirte en mi caballero!!!</div>
                </div>
                <div class=" gifltotal">
                    <div class="giflt">
                        <div class="gifl-img">
                            <img src="https://oss.chathot.me/action/halloweenDirectory/miss/lw1.png"
                                alt="">
                        </div>
                        <div class="gifl-text">20</div>
                    </div>
                    <div class="giflt">
                        <div class="gifl-img">
                            <img src="https://oss.chathot.me/action/halloweenDirectory/miss/lw2.png"
                                alt="">
                        </div>
                        <div class="gifl-text">2999</div>
                    </div>
                    <div class="giflt">
                        <div class="gifl-img">
                            <img src="https://oss.chathot.me/action/halloweenDirectory/miss/lw3.png"
                                alt="">
                        </div>
                        <div class="gifl-text">3000</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="countdown">

            <div class="count">
                <div class="left">
                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/left.png"
                        alt="">
                </div>
                <span>{{ time1 }}d</span>
                <span>{{ time2 }}h</span>
                <span>{{ time3 }}m</span>
                <span>{{ time6 }}s</span>
                <div class="right">
                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/right.png"
                        alt="">
                </div>
            </div>
        </div>
        <div class="tab" style="margin-left: 0.25rem;
            margin-right: 0.25rem;">

            <div v-show='tabT==1'>
                <div class="tabHead">
                    <div class="tabHead-text">
                        <ul>
                            <li :class="{'active':tabT===1}" @click='changeTab(1)'>Miss</li>
                            <li :class="{'active':tabT===2}" @click='changeTab(2)'>Caballero</li>
                            <li :class="{'active':tabT===3}" @click='changeTab(3)'>Popularidad</li>
                        </ul>
                    </div>

                    <div class="tabt-text">

                        <div>Solo las mujeres que se encuentran en la lista,</div>
                        <div>están ordenadas segun los puntos recibidos</div>
                        <div> de los obsequios del evento.</div>
                    </div>
                    <div class="tabpic">
                        <div class="tabpic-img" style="margin-top: 1.5rem;" v-if="top2==''">
                            <div class="tabpic-image">
                              
                            </div>
                            <div class="tabTa">
                                <div style="overflow:hidden;
                                text-overflow:ellipsis;
                                white-space:nowrap;"></div>
                                <div></div>
                                <div style="color: #fff;     position: absolute;
                           top: .85rem;
                            left: 0.5rem;"></div>
                            </div>
                        </div>
                        <div class="tabpic-img" style="margin-top: 1.5rem;" v-for='item in top2'  :key='item.user_id' v-else>
                            <div class="tabpic-image">
                                <img :src="item.avatar" @click='apply(item.user_id)'
                                    alt="">
                            </div>
                            <div class="tabTa">
                                <div style="overflow:hidden;
                                text-overflow:ellipsis;
                                text-align: center;
                                white-space:nowrap;">{{item.nickname}}</div>
                                <div>ID:{{item.user_no}}</div>
                                <div style="color: #fff;  text-align: center;
                                    margin-top: .01rem;
                                ">{{num(item.point)}}</div>
                            </div>
                        </div>
                        <div class="tabpic-img" v-if="top1==''"
                        style="background: url('https://oss.chathot.me/action/halloweenDirectory/miss/1.png') no-repeat center /100% 100%;">
                        <div class="tabpic-image"
                            style="background: url('https://oss.chathot.me/action/halloweenDirectory/miss/one.png') no-repeat center /100% 100%;">
                          
                        </div>
                        <div class="tabTa" style="color: #ff5c12;">
                            <div style="overflow:hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap;"></div>
                            <div></div>
                            <div style="color: #fff;     position: absolute;
                      top: .95rem;
                        left: 0.5rem;"></div>
                        </div>
                    </div>
                        <div class="tabpic-img" v-else v-for='item in  top1' :key='item.user_id'
                            style="background: url('https://oss.chathot.me/action/halloweenDirectory/miss/1.png') no-repeat center /100% 100%;">
                            <div class="tabpic-image"
                                style="background: url('https://oss.chathot.me/action/halloweenDirectory/miss/one.png') no-repeat center /100% 100%;">
                                <img :src="item.avatar" @click='apply(item.user_id)'
                                    alt="">
                            </div>
                            <div class="tabTa" style="color: #ff5c12;">
                                <div style="overflow:hidden;
                                text-overflow:ellipsis;
                                text-align: center;
                                white-space:nowrap;">{{item.nickname}}</div>
                                <div>ID:{{item.user_no}}</div>
                               
                                <div     style="color: #fff;  text-align: center; margin-top: .1rem;
                                ">{{num(item.point)}}</div>
                            </div>
                        </div>
                        <div  v-if="top3==''"  class="tabpic-img"
                        style="margin-top: 1.5rem; background: url('https://oss.chathot.me/action/halloweenDirectory/miss/3.png') no-repeat center /100% 100%;">
                        <div class="tabpic-image"
                            style="background: url('https://oss.chathot.me/action/halloweenDirectory/miss/three.png') no-repeat center /100% 100%;">
                        
                        </div>
                        <div class="tabTa" style="color: #fff;">
                            <div style="overflow:hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap;"></div>
                            <div></div>
                            <div style="color: #fff;     position: absolute;
                        top: .9rem;
                        left: 0.5rem;"></div>
                        </div>
                    </div>
                        <div  v-else  class="tabpic-img"  v-for='item in top3' :key='item.user_id'
                            style="margin-top: 1.5rem; background: url('https://oss.chathot.me/action/halloweenDirectory/miss/3.png') no-repeat center /100% 100%;">
                            <div class="tabpic-image"
                                style="background: url('https://oss.chathot.me/action/halloweenDirectory/miss/three.png') no-repeat center /100% 100%;">
                                <img :src="item.avatar" @click='apply(item.user_id)'
                                    alt="">
                            </div>
                            <div class="tabTa" style="color: #fff;">
                                <div style="overflow:hidden;
                                text-overflow:ellipsis;
                                text-align: center;
                                white-space:nowrap;">{{item.nickname}}</div>
                                <div>ID:{{item.user_no}}</div>
                                <div style="color: #fff;  text-align: center;
                                margin-top: .1rem;
                                ">{{num(item.point)}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="inEnd">
                    <div class="popularMe" v-for='(item ,index) in top30' :key='item.user_id'>
                        <div class="left">
                            <div class='left-num'>{{index+4}}</div>
                            <div class="left-img">
                                <img :src="item.avatar" @click='apply(item.user_id)'
                                    alt="">
                            </div>
                        </div>
                        <div class="central">
                            <div class="central-name" style="overflow:hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap;">{{item.nickname}}</div>
                            <div class="central-id" style="	font-size: 0.26rem;">ID:{{item.user_no}}</div>

                        </div>
                        <div class="right">
                            <div  class="right-num"
                            >{{num(item.point)}}</div>

                        </div>
                    </div>
                 

                </div>
                <div class="userfoot">
                    <div class="left">
                        <!-- <div class='left-num'>{{userInfo.rank>=30?30+:userInfo.rank}}</div> -->
                        <div class='left-num' >{{mylist.rank}}</div> 
                        <div class="left-img">
                            <img :src="mylist.avatar"
                            @click='apply(mylist.user_id)'
                                alt="">
                        </div>
                    </div>
                    <div class="central">
                        <div class="central-name" style="overflow:hidden; 
                        text-overflow:ellipsis;
                        white-space:nowrap;">{{mylist.nickname}}</div>
                        <div class="central-id" style="	font-size: 0.26rem;">ID:{{mylist.user_no}}</div>

                    </div>
                    <div class="right">
                        <div class="right-num">{{num(mylist.point)}}</div>

                    </div>
                </div>
            </div>
            <div v-show='tabT==2'>
                <div class="tabHead">
                    <div class="tabHead-text">
                        <ul>
                            <li :class="{'active':tabT===1}" @click='changeTab(1)'>Miss</li>
                            <li :class="{'active':tabT===2}" @click='changeTab(2)'>Caballero</li>
                            <li :class="{'active':tabT===3}" @click='changeTab(3)'>Popularidad</li>
                        </ul>
                    </div>

                    <div class="tabt-text">

                        <div>Ordene segun los puntos dados</div>
                        <div>los regalos del evento.</div>
                
                    </div>
                    <div class="tabpic">
                        <div class="tabpic-img" style="margin-top: 1.5rem;" v-if="receiveTop2==''">
                            <div class="tabpic-image">
                              
                            </div>
                            <div class="tabTa">
                                <div style="overflow:hidden;
                                text-overflow:ellipsis;
                                white-space:nowrap;"></div>
                                <div></div>
                                <div style="color: #fff;     position: absolute;
                           top: .85rem;
                            left: 0.5rem;"></div>
                            </div>
                        </div>
                        <div class="tabpic-img" style="margin-top: 1.5rem;" v-for='item in receiveTop2'  :key='item.user_id' v-else>
                            <div class="tabpic-image">
                                <img :src="item.avatar"  @click='apply(item.user_id)' 
                                    alt="">
                            </div>
                            <div class="tabTa">
                                <div style="overflow:hidden;
                                text-overflow:ellipsis;
                                white-space:nowrap;    text-align: center;">{{item.nickname}}</div>
                                <div>ID:{{item.user_no}}</div>
                                <div style="color: #fff;  text-align: center;        margin-top: .01rem;
                                ">{{num(item.point)}}</div>
                            </div>
                        </div>
                        <div class="tabpic-img" v-if="receiveTop1==''"
                        style="background: url('https://oss.chathot.me/action/halloweenDirectory/miss/1.png') no-repeat center /100% 100%;">
                        <div class="tabpic-image"
                            style="background: url('https://oss.chathot.me/action/halloweenDirectory/miss/one.png') no-repeat center /100% 100%;">
                          
                        </div>
                        <div class="tabTa" style="color: #ff5c12;">
                            <div style="overflow:hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap;"></div>
                            <div></div>
                            <div style="color: #fff;     position: absolute;
                      top: .95rem;
                        left: 0.5rem;"></div>
                        </div>
                    </div>
                        <div class="tabpic-img" v-else v-for='item in  receiveTop1' :key='item.user_id'
                            style="background: url('https://oss.chathot.me/action/halloweenDirectory/miss/1.png') no-repeat center /100% 100%;">
                            <div class="tabpic-image"
                                style="background: url('https://oss.chathot.me/action/halloweenDirectory/miss/one.png') no-repeat center /100% 100%;">
                                <img :src="item.avatar" @click='apply(item.user_id)'  style="width: 1.36rem;"
                                    alt="">
                            </div>
                            <div class="tabTa" style="color: #ff5c12;">
                                <div style="overflow:hidden;
                                text-overflow:ellipsis;
                                white-space:nowrap;    text-align: center;">{{item.nickname}}</div>
                                <div>ID:{{item.user_no}}</div>
                               
                                <div style="color: #fff;  text-align: center; margin-top: .1rem;
                                ">{{num(item.point)}}</div>
                            </div>
                        </div>
                        <div  v-if="receiveTop3==''"  class="tabpic-img"
                        style="margin-top: 1.5rem; background: url('https://oss.chathot.me/action/halloweenDirectory/miss/3.png') no-repeat center /100% 100%;">
                        <div class="tabpic-image"
                            style="background: url('https://oss.chathot.me/action/halloweenDirectory/miss/three.png') no-repeat center /100% 100%;">
                        
                        </div>
                        <div class="tabTa" style="color: #fff;">
                            <div style="overflow:hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap;"></div>
                            <div></div>
                            <div style="color: #fff;     position: absolute;
                        top: .9rem;
                        left: 0.5rem;"></div>
                        </div>
                    </div>
                        <div  v-else  class="tabpic-img"  v-for='item in receiveTop3' :key='item.user_id'
                            style="margin-top: 1.5rem; background: url('https://oss.chathot.me/action/halloweenDirectory/miss/3.png') no-repeat center /100% 100%;">
                            <div class="tabpic-image"
                                style="background: url('https://oss.chathot.me/action/halloweenDirectory/miss/three.png') no-repeat center /100% 100%;">
                                <img :src="item.avatar" @click='apply(item.user_id)'
                                    alt="">
                            </div>
                            <div class="tabTa" style="color: #fff;">
                                <div style="overflow:hidden;
                                text-overflow:ellipsis;
                                white-space:nowrap;    text-align: center;">{{item.nickname}}</div>
                                <div>ID:{{item.user_no}}</div>
                                <div style="color: #fff;  text-align: center;     margin-top: .1rem;
                                ">{{num(item.point)}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="inEnd">
                    <div class="popularMe" v-for='(item ,index) in receiveTop30' :key='item.user_id'>
                        <div class="left">
                            <div class='left-num'>{{index+4}}</div>
                            <div class="left-img">
                                <img :src="item.avatar" @click='apply(item.user_id)'
                                    alt="">
                            </div>
                        </div>
                        <div class="central">
                            <div class="central-name" style="overflow:hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap;">{{item.nickname}}</div>
                            <div class="central-id" style="	font-size: 0.26rem;">ID:{{item.user_no}}</div>

                        </div>
                        <div class="right">
                            <div class="right-num">{{num(item.point)}}</div>

                        </div>
                    </div>
                 

                </div>
                <div class="userfoot">
                    <div class="left">
                        <!-- <div class='left-num'>{{userInfo.rank>=30?30+:userInfo.rank}}</div> -->
                        <div class='left-num' >{{myreceive.rank}}</div> 
                        <div class="left-img">
                            <img :src="myreceive.avatar" @click='apply(myreceive.user_id)'
                                alt="">
                        </div>
                    </div>
                    <div class="central">
                        <div class="central-name" style="overflow:hidden; 
                        text-overflow:ellipsis;
                        white-space:nowrap;">{{myreceive.nickname}}</div>
                        <div class="central-id" style="	font-size: 0.26rem;">ID:{{myreceive.user_no}}</div>

                    </div>
                    <div class="right">
                        <div class="right-num">{{num(myreceive.point)}}</div>

                    </div>
                </div>
            </div>
            <div v-show='tabT==3'>
                <div class="tabHead">
                    <div class="tabHead-text">
                        <ul>
                            <li :class="{'active':tabT===1}" @click='changeTab(1)'>Miss</li>
                            <li :class="{'active':tabT===2}" @click='changeTab(2)'>Caballero</li>
                            <li :class="{'active':tabT===3}" @click='changeTab(3)'>Popularidad</li>
                        </ul>
                    </div>

                    <div class="tabt-text">

                        <div>Ordene por el numero de personas que</div>
                        <div>recibieron los regalos del evento.</div>
                
                    </div>
                    <div class="tabpic">
                        <div class="tabpic-img" style="margin-top: 1.5rem;" v-if="moodsTop2==''">
                            <div class="tabpic-image">
                              
                            </div>
                            <div class="tabTa">
                                <div style="overflow:hidden;
                                text-overflow:ellipsis;
                                white-space:nowrap;"></div>
                                <div></div>
                                <div style="color: #fff;     position: absolute;
                           top: .85rem;
                            left: 0.5rem;"></div>
                            </div>
                        </div>
                        <div class="tabpic-img" style="margin-top: 1.5rem;" v-for='item in moodsTop2'  :key='item.user_id' v-else>
                            <div class="tabpic-image">
                                <img :src="item.avatar" @click='apply(item.user_id)'  style="width: 1.36rem;"
                                    alt="">
                            </div>
                            <div class="tabTa">
                                <div style="overflow:hidden;
                                text-overflow:ellipsis;
                                white-space:nowrap;    text-align: center;">{{item.nickname}}</div>
                                <div>ID:{{item.user_no}}</div>
                                <div style="color: #fff;  text-align: center;   margin-top: .01rem;
                                ">{{num(item.popular_num)}}</div>
                            </div>
                        </div>
                        <div class="tabpic-img" v-if="moodsTop1==''"
                        style="background: url('https://oss.chathot.me/action/halloweenDirectory/miss/1.png') no-repeat center /100% 100%;">
                        <div class="tabpic-image"
                            style="background: url('https://oss.chathot.me/action/halloweenDirectory/miss/one.png') no-repeat center /100% 100%;">
                          
                        </div>
                        <div class="tabTa" style="color: #ff5c12;">
                            <div style="overflow:hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap;"></div>
                            <div></div>
                            <div style="color: #fff;     position: absolute;
                      top: .95rem;
                        left: 0.5rem;"></div>
                        </div>
                    </div>
                        <div class="tabpic-img" v-else v-for='item in  moodsTop1' :key='item.user_id'
                            style="background: url('https://oss.chathot.me/action/halloweenDirectory/miss/1.png') no-repeat center /100% 100%;">
                            <div class="tabpic-image"
                                style="background: url('https://oss.chathot.me/action/halloweenDirectory/miss/one.png') no-repeat center /100% 100%;">
                                <img :src="item.avatar" @click='apply(item.user_id)'
                                    alt="">
                            </div>
                            <div class="tabTa" style="color: #ff5c12;">
                                <div style="overflow:hidden;
                                text-overflow:ellipsis;
                                white-space:nowrap;  text-align: center; ">{{item.nickname}}</div>
                                <div>ID:{{item.user_no}}</div>
                               
                                <div style="color: #fff;  text-align: center; margin-top: .1rem;
                                ">{{num(item.popular_num)}}</div>
                            </div>
                        </div>
                        <div  v-if="moodsTop3==''"  class="tabpic-img"
                        style="margin-top: 1.5rem; background: url('https://oss.chathot.me/action/halloweenDirectory/miss/3.png') no-repeat center /100% 100%;">
                        <div class="tabpic-image"
                            style="background: url('https://oss.chathot.me/action/halloweenDirectory/miss/three.png') no-repeat center /100% 100%;">
                        
                        </div>
                        <div class="tabTa" style="color: #fff;">
                            <div style="overflow:hidden;
                            text-overflow:ellipsis;
                            text-align: center;
                            white-space:nowrap;"></div>
                            <div></div>
                            <div style="color: #fff;     position: absolute;
                        top: .9rem;
                        left: 0.5rem;"></div>
                        </div>
                    </div>
                        <div  v-else  class="tabpic-img"  v-for='item in moodsTop3' :key='item.user_id'
                            style="margin-top: 1.5rem; background: url('https://oss.chathot.me/action/halloweenDirectory/miss/3.png') no-repeat center /100% 100%;">
                            <div class="tabpic-image"
                                style="background: url('https://oss.chathot.me/action/halloweenDirectory/miss/three.png') no-repeat center /100% 100%;">
                                <img :src="item.avatar" @click='apply(item.user_id)'
                                    alt="">
                            </div>
                            <div class="tabTa" style="color: #fff;">
                                <div style="overflow:hidden;
                                text-overflow:ellipsis;
                                text-align: center;
                                white-space:nowrap;">{{item.nickname}}</div>
                                <div>ID:{{item.user_no}}</div>
                                <div style="color: #fff;  text-align: center;     margin-top: .1rem;
                                ">{{num(item.popular_num)}}</div>
                            </div>
                        </div>
                  
                    </div>
                </div>
                <div class="inEnd">
                    <div class="popularMe" v-for='(item ,index) in moodsTop30' :key='item.user_id'>
                        <div class="left">
                            <div class='left-num'>{{index+4}}</div>
                            <div class="left-img">
                                <img :src="item.avatar" @click='apply(item.user_id)'
                                    alt="">
                            </div>
                        </div>
                        <div class="central">
                            <div class="central-name" style="overflow:hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap;">{{item.nickname}}</div>
                            <div class="central-id" style="	font-size: 0.26rem;">ID:{{item.user_no}}</div>

                        </div>
                        <div class="right">
                            <div class="right-num">{{num(item.popular_num)}}</div>

                        </div>
                    </div>
                 

                </div>
                <div class="userfoot">
                    <div class="left">
                        <!-- <div class='left-num'>{{userInfo.rank>=30?30+:userInfo.rank}}</div> -->
                        <div class='left-num' >{{mymoods.rank}}</div> 
                        <div class="left-img">
                            <img :src="mymoods.avatar" @click='apply(mymoods.user_id)'
                                alt="">
                        </div>
                    </div>
                    <div class="central">
                        <div class="central-name" style="overflow:hidden; 
                        text-overflow:ellipsis;
                        white-space:nowrap;">{{mymoods.nickname}}</div>
                        <div class="central-id" style="	font-size: 0.26rem;">ID:{{mymoods.user_no}}</div>

                    </div>
                    <div class="right">
                        <div class="right-num">{{num(mymoods.popular_num)}}</div>

                    </div>
                </div>
            </div>
        </div>


        <div class="tanc" v-if='flag'>

            <div class="windowi">
                <div class="poprewads">
                    <div class="poprewadsk">
                        <div class="pophead">Premios</div>
                    </div>
                    <div class="rewclose" @click='rewColse'><img
                            src="https://oss.chathot.me/action/halloweenDirectory/miss/close.png"
                            alt=""></div>
                    <div class="rewa-t">
                        <div class="rewad-Top">
                            Top 1 de Miss
                        </div>
                        <div class="rewRank">
                            <div class="rewadpic">
                                <div class="rewadpic-img">

                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/ml.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Marco*15d</div>
                            </div>
                            <div class="rewadpic">
                                <div class="rewadpic-img">
                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/gfcard.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Montura*15d</div>
                            </div>

                        </div>
                        <div class="rewRank">
                            <div class="rewadpic">
                                <div class="rewadpic-img">

                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/girl1.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Medalla*365d</div>
                            </div>
                            <div class="rewadpic">
                                <div class="rewadpic-img">
                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/jb.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Oros 80K</div>
                            </div>

                        </div>
                        <div class="rewad-Top" style="margin-top: .2rem;">
                            Top 2 de Miss
                        </div>
                        <div class="rewRank">
                            <div class="rewadpic">
                                <div class="rewadpic-img">

                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/ml.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Marco*10d</div>
                            </div>
                            <div class="rewadpic">
                                <div class="rewadpic-img">
                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/gfcard.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Montura*10d</div>
                            </div>

                        </div>
                        <div class="rewRank">
                            <div class="rewadpic">
                                <div class="rewadpic-img">

                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/girl2.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Medalla*365d</div>
                            </div>
                            <div class="rewadpic">
                                <div class="rewadpic-img">
                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/jb.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Oros 50K</div>
                            </div>

                        </div>
                        <div class="rewad-Top" style="margin-top: .2rem;">
                            Top 3 de Miss
                        </div>
                        <div class="rewRank">
                            <div class="rewadpic">
                                <div class="rewadpic-img">

                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/ml.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Marco*7d</div>
                            </div>
                            <div class="rewadpic">
                                <div class="rewadpic-img">
                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/gfcard.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Montura*7d</div>
                            </div>

                        </div>
                        <div class="rewRank">
                            <div class="rewadpic">
                                <div class="rewadpic-img">

                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/girl3.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Medalla*365d</div>
                            </div>
                            <div class="rewadpic">
                                <div class="rewadpic-img">
                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/jb.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Oros 30K</div>
                            </div>

                        </div>
                        <div class="rewad-Top" style="margin-top: .5rem;  width: 3rem; margin-left: 1.8rem;">
                            Top 1 de Caballero
                        </div>
                        <div class="rewRank">
                            <div class="rewadpic">
                                <div class="rewadpic-img">

                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/qs.png"
                                  
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Marco*15d</div>
                            </div>
                            <div class="rewadpic">
                                <div class="rewadpic-img">
                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/mancar.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Montura*15d</div>
                            </div>

                        </div>
                        <div class="rewRank">
                            <div class="rewadpic">
                                <div class="rewadpic-img">
                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/boy1.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Medalla*365d</div>
                            </div>
                            <div class="rewadpic">
                                <div class="rewadpic-img">
                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/jb.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Oros 120K</div>
                            </div>

                        </div>
                        <div class="rewad-Top" style="margin-top: .2rem;  width: 3rem; margin-left: 1.8rem;">
                            Top 2 de Caballero
                        </div>
                        <div class="rewRank">
                            <div class="rewadpic">
                                <div class="rewadpic-img">

                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/qs.png"
                                  
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Marco*10d</div>
                            </div>
                            <div class="rewadpic">
                                <div class="rewadpic-img">
                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/mancar.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Montura*10d</div>
                            </div>

                        </div>
                        <div class="rewRank">
                            <div class="rewadpic">
                                <div class="rewadpic-img">

                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/boy2.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Medalla*365d</div>
                            </div>
                            <div class="rewadpic">
                                <div class="rewadpic-img">
                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/jb.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Oros 80K </div>
                            </div>

                        </div>
                        <div class="rewad-Top" style="margin-top: .2rem;  width: 3rem; margin-left: 1.8rem;">
                            Top 3 de Caballero
                        </div>
                        <div class="rewRank">
                            <div class="rewadpic">
                                <div class="rewadpic-img">

                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/qs.png"
                            
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Marco*7d</div>
                            </div>
                            <div class="rewadpic">
                                <div class="rewadpic-img">
                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/mancar.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Montura*7d</div>
                            </div>

                        </div>
                        <div class="rewRank">
                            <div class="rewadpic">
                                <div class="rewadpic-img">

                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/boy3.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Medalla*365d</div>
                            </div>
                            <div class="rewadpic">
                                <div class="rewadpic-img">
                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/jb.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Oros 50K</div>
                            </div>

                        </div>
                        <div class="rewad-Top" style="margin-top: .5rem ;  width: 3.2rem; margin-left: 1.8rem;">
                            Top 1 de Popularidad
                        </div>
                        <div class="rewRank">
                            <div class="rewadpic">
                                <div class="rewadpic-img">

                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/rq.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Marco*15d</div>
                            </div>
                            <div class="rewadpic">
                                <div class="rewadpic-img">
                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/jb.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Oros 60K</div>
                            </div>

                        </div>
        
                        <div class="rewad-Top" style="margin-top: .2rem;  width: 3.2rem; margin-left: 1.8rem;">
                            Top 2 de Popularidad
                        </div>
                        <div class="rewRank">
                            <div class="rewadpic">
                                <div class="rewadpic-img">

                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/rq.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Marco*10d</div>
                            </div>
                            <div class="rewadpic">
                                <div class="rewadpic-img">
                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/jb.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Oros 40K</div>
                            </div>

                        </div>
                   
                        <div class="rewad-Top" style="margin-top: .2rem;  width: 3.2rem; margin-left: 1.8rem;">
                            Top 3 de Popularidad
                        </div>
                        <div class="rewRank">
                            <div class="rewadpic">
                                <div class="rewadpic-img">

                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/rq.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Marco*7d</div>
                            </div>
                            <div class="rewadpic">
                                <div class="rewadpic-img">
                                    <img src="https://oss.chathot.me/action/halloweenDirectory/miss/jb.png"
                                        alt="">
                                </div>
                                <div class="rewadpic-num">Oros 20K</div>
                            </div>

                        </div>
                     
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    a: '',
                    flag: false,
                    time1: '00',
                    time2: '00',
                    time3: '00',
                    time6: '00',
                    tabT: 1,
                    token: GetUrlParam('token'),
                    activity_id: environment() ? 538 : 433,
                    user_id: GetUrlParam('user_id'),
                    list:[],
                    mylist:[],
                    top1:[],
                    top2:[],
                    top3:[],
                    top30:[],
                    receive:[],
                    myreceive:[],
                    receiveTop1:[],
                    receiveTop2:[],
                    receiveTop3:[],
                    receiveTop30:[],
                    moods:[],
                    mymoods:[],
                    moodsTop1:[],
                    moodsTop2:[],
                    moodsTop3:[],
                    moodsTop30:[],
                    userInfo:[],
                    rank:[],
                    number:[]
                    
                }
            },
            mounted() {
                this.getActiveInfo()
                this.receiveGift()
                this.sentiment()
                this.uinFo()
                this.setUv()
                this.$nextTick(() => {
                    var el = document.querySelector('.head-svga');
                    var parser = new SVGA.Parser(el);
                    parser.load(
                        'https://oss.chathot.me/action/halloweenDirectory/miss/missLatinAmerica.svga',
                        (
                            videoItem) => {
                            const player = new SVGA.Player(el);
                            player.setVideoItem(videoItem);
                            player.startAnimation();
                        })

                })
            },
            methods: {
                setUv: function () {
                    var data = {
                        op: "activity_uv",
                        user_id: GetUrlParam('user_id'),
                        token: GetUrlParam('token'),
                        active_id: this.activity_id,
                    };
                    api_activity_data(data).then((res) => {
                        // console.log('uv 的信息返回：', res)
                        if (res.status == 200) {}
                    })
                },
                 apply: function (id) {
                  console.log('111',id);
                    userDetails(id)
                },

                changeTab(num) {
                    this.tabT = num
                },
                openTc() {
                    this.flag = true
                    document.body.style.overflowY = "hidden"

                },
                rewColse() {
                    this.flag = false
                    document.body.style.overflowY = "auto"
                },
      //送礼榜
                getActiveInfo() {
                    // console.log('id:', this.user_id, '---token:', this.token)
                    const query = {
                        user_id: this.user_id,
                        user_token: this.token,
                        type: 2,
                    };
                    return ajax2("GET", query, {}, "api/MisslatinController/missRank")
                        .then((res) => {
                            console.log('```', res.data)
                            this.list=res.data.list
                            this.mylist=res.data.my_rank_data
                                  this.top1= this.list.slice(0,1)
                                    this.top2= this.list.slice(1,2)
                                    this.top3= this.list.slice(2,3)
                                    this.top30=this.list.slice(3,30)
         
                       
                        })

                },
                     //收礼榜
                receiveGift() {
                    // console.log('id:', this.user_id, '---token:', this.token)
                    const query = {
                        user_id: this.user_id,
                        user_token: this.token,
                        type: 1,
                    };
                    return ajax2("GET", query, {}, "api/MisslatinController/missRank")
                        .then((res) => {
                    
                                    // console.log('123', res.data)
                            this.receive=res.data.list
                            this.myreceive  =res.data.my_rank_data
                                  this.receiveTop1= this.receive.slice(0,1)
                                    this.receiveTop2= this.receive.slice(1,2)
                                    this.receiveTop3= this.receive.slice(2,3)
                                    this.receiveTop30=this.receive.slice(3,30)
                                  
                              

                        })

                },
           //人气榜
           sentiment() {
                    // console.log('id:', this.user_id, '---token:', this.token)
                    const query = {
                        user_id: this.user_id,
                        user_token: this.token,
                    };
                    return ajax2("GET", query, {}, "api/MisslatinController/popularRank")
                        .then((res) => {
                    
                                    // console.log('123', res.data)
                            this.moods=res.data.list
                            this.mymoods =res.data.my_rank_data
                                  this.moodsTop1= this.moods.slice(0,1)
                                    this.moodsTop2= this.moods.slice(1,2)
                                    this.moodsTop3= this.moods.slice(2,3)
                                    this.moodsTop30=this.moods.slice(3,30)
    
                              

                        })

                },
                //信息
                uinFo() {
                    console.log('id:', this.user_id, '---token:', this.token)
                    const query = {
                        user_id: this.user_id,
                        user_token: this.token,
                    };
                    return ajax2("GET", query, {}, "api/MisslatinController/getActData")
                        .then((res) => {
                    console.log(res);
                                    // console.log('123', res.data)
                        this.userInfo=res.data.user_info
                        this.leftTimer(res.data.djs)

                        })

                },
                //倒计时
                leftTimer: function (leftTime) {
                    var self = this;
                    var leftTime = leftTime
                    var Inter = setInterval(function () {
                        if (leftTime > 0) {
                            // console.log('q1aa')
                            //计算剩余的毫秒数
                            var days = parseInt(leftTime / 60 / 60 / 24, 10); //计算剩余的天数
                            var hours = parseInt(leftTime / 60 / 60 % 24, 10); //计算剩余的小时
                            var minutes = parseInt(leftTime / 60 % 60, 10); //计算剩余的分钟
                            var seconds = parseInt(leftTime % 60, 10); //计算剩余的秒数
                            hours = self.checkTime(hours);
                            minutes = self.checkTime(minutes);
                            seconds = self.checkTime(seconds);
                            self.time1 = days;
                            self.time2 = hours;
                            self.time3= minutes;
                            self.time6 = seconds;
                            // self.time1 = days;
                            // self.time2 = hours + ":" + minutes + ":" + seconds;
                            leftTime--;
                        } else {
                            self.time1 = '00';
                            self.time2 = '00';
                            self.time3 = '00';
                            self.time6 = '00';
                            // self.time1 = '0';
                            // self.time2 = '00:00:00';
                            clearInterval(Inter)
                        }
                    }, 1000);
                },
                checkTime: function (i) { //将0-9的数字前面加上0，例1变为01
                    if (i < 10) {
                        i = "0" + i;
                    }
                    return i;
                },
                num(number) {
                    var num = '';
                    if (number < 1000) {
                        num = number;
                    } else if (number >= 1000 && number < 1000000) {
                        var txt = (number / 1000).toFixed(3);
                        num = this.formatDecimal(txt, 1) + 'K';
                    } else if (number >= 1000000) {
                        var txt = (number / 1000000).toFixed(3);
                        num = this.formatDecimal(txt, 1) + 'M';
                    }
                    return num;
                },
                formatDecimal(num, decimal) {
                    // console.log(num)
                    num = num.toString();
                    var index = num.indexOf('.');
                    if (index !== -1) {
                        num = num.substring(0, decimal + index + 1);
                    } else {
                        num = num.substring(0);
                    }
                    return parseFloat(num).toFixed(decimal);
                },
            }
        })
    </script>

</body>

</html>